import React, { Component } from 'react'
import { UserOutlined, PlusOutlined } from '@ant-design/icons'
import { Avatar, Button, Form, Checkbox, Select, Input, Upload, DatePicker } from 'antd'

const { RangePicker } = DatePicker

export default class Antds extends Component {
  constructor() {
    super()
    this.state1 = {
      age: 32
    }
  }

  normFile = e => {
    if (Array.isArray(e)) {
      return e
    }
    return e?.fileList
  }

  rangeConfig = {
    rules: [
      {
        type: 'array',
        required: true,
        message: 'Please select time!'
      }
    ]
  }

  render() {
    return (
      <div>
        <Form
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 600 }}
          initialValues={{ remember: true }}
          onFinish={this.onFinish}
          autoComplete="off">
          <Form.Item label="头像" name="avatar">
            <Avatar icon={<UserOutlined />} />
          </Form.Item>
          <Form.Item
            label="用户名"
            name="username"
            rules={[{ required: true, message: '请输入用户名' }]}>
            <Input />
          </Form.Item>

          <Form.Item
            label="密码"
            name="password"
            rules={[{ required: true, message: '请输入密码' }]}>
            <Input.Password />
          </Form.Item>

          <Form.Item name="remember" valuePropName="checked" wrapperCol={{ offset: 8, span: 16 }}>
            <Checkbox>用户协议</Checkbox>
          </Form.Item>

          <Form.Item
            label="城市选择"
            name="select"
            rules={[{ required: true, message: '请选择城市' }]}>
            <Select>
              <Select.Option value="city1">深圳</Select.Option>
              <Select.Option value="city2">上海</Select.Option>
              <Select.Option value="city3">武汉</Select.Option>
            </Select>
          </Form.Item>

          <Form.Item label="日期选择">
            <DatePicker />
          </Form.Item>

          <Form.Item label="时间选择">
            <RangePicker />
          </Form.Item>

          <Form.Item name="range-time-picker" label="日期时间选择" {...this.rangeConfig}>
            <RangePicker showTime format="YYYY-MM-DD HH:mm:ss" />
          </Form.Item>

          <Form.Item label="上传" valuePropName="fileList" getValueFromEvent={this.normFile}>
            <Upload action="/upload.do" listType="picture-card">
              <div>
                <PlusOutlined />
                <div style={{ marginTop: 8 }}>Upload</div>
              </div>
            </Upload>
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button type="primary" htmlType="submit">
              提交
            </Button>
          </Form.Item>
        </Form>
      </div>
    )
  }
}
